<template>
  <div class="h-screen flex flex-col">
    <!-- 工具栏 -->
    <Toolbar @directory-selected="handleDirectorySelected" />
    
    <!-- 主要内容区域 -->
    <div class="flex-1 flex overflow-hidden">
      <!-- 文件树 -->
      <FileTree 
        :directory-path="selectedPath"
        @fileClick="handleFileClick"
        class="w-60 overflow-auto"
      />
      
      <!-- 编辑器区域 -->
      <div class="flex-1 overflow-hidden">
        <EditorTabs 
          ref="editorTabsRef"
          :tabs="tabs"
          :currentTab="currentTab"
          @switch-tab="switchTab"
          @close-tab="closeTab"
        />
      </div>

      <!-- AI 聊天面板 -->
      <AIChatPanel />
    </div>

    <!-- Footbar -->
    <Footbar />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import Toolbar from './components/Toolbar.vue'
import FileTree from './components/FileTree.vue'
import EditorTabs from './components/EditorTabs.vue'
import AIChatPanel from './components/AIChatPanel.vue'
import Footbar from './components/Footbar.vue'

// 选中的目录路径
const selectedPath = ref('')

// 标签页管理
const tabs = ref([])
const currentTab = ref(null)
const editorTabsRef = ref(null)

// 处理目录选择
const handleDirectorySelected = (path) => {
  selectedPath.value = path
}

// 文件点击处理
const handleFileClick = (file) => {
  if (file.type === 'file') {
    // 检查是否已存在相同文件的标签
    const existingTab = tabs.value.find(tab => tab.name === file.name)
    
    if (existingTab) {
      currentTab.value = existingTab.id
    } else {
      // 创建新标签
      const newTab = {
        id: Date.now(),
        name: file.name,
        content: `// ${file.name}\n// Add your code here`
      }
      tabs.value.push(newTab)
      currentTab.value = newTab.id
    }
  }
}

// 标签页切换
const switchTab = (tabId) => {
  currentTab.value = tabId
}

// 关闭标签页
const closeTab = (tabId) => {
  const index = tabs.value.findIndex(tab => tab.id === tabId)
  if (index !== -1) {
    tabs.value.splice(index, 1)
    
    // 如果关闭的是当前标签，切换到其他标签
    if (currentTab.value === tabId) {
      if (tabs.value.length > 0) {
        // 优先选择右边的标签，如果没有则选择左边的
        currentTab.value = tabs.value[Math.min(index, tabs.value.length - 1)].id
      } else {
        currentTab.value = null
      }
    }
  }
}
</script>

<style>
/* 自定义滚动条样式 */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: #2b2b2b;
}

::-webkit-scrollbar-thumb {
  background: #4a4a4a;
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* 设置基础字体 */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</style>